<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="margin: 0 450px;width: 37.2%">
    <el-table-column
      prop="throneName"
      label="权限一栏"
      width="250">
    </el-table-column>
    <el-table-column
      prop="throneDesc"
      label="对应模块"
      width="250">
    </el-table-column>
  </el-table>
  <div style="width:200px;height:25px;border:solid 1px;border-radius:30px;background-color:pink">
      <label style="margin-left:65px;color:blue">{{input}}</label>
  </div>
  <Pager 
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleNewPage"
  ></Pager>
</div>
</template>

<script>
import Pager from '../components/Pager'
import {checkRole} from '../services/RoleService.js' 
export default {
  components:{
    Pager,
  },
    async created(){
        this.row = this.$route.params;
        this.input = this.row.roleName;
        var resp = await checkRole(this.page,this.limit,this.row.roleId);
        this.tableData = resp.data.list;
        this.total = resp.data.total;
    },
     methods: {
      async handleNewPage(newPage) {

      this.$router.push({
        query: {
          page: newPage,
        },
      }); 

      var resp = await checkRole(this.page,this.limit,this.row.roleId);
      this.tableData = resp.list;
      this.total = resp.total;
    }
    },
    data() {
      return {
      tableData: [],
      limit: 5,
      total: 0,
      panelNumber: 10,
      input:'',
      row:''
      }
    },
    computed:{
      page(){
        return +this.$route.query.page || 1;
      }
    }
}
</script>

<style>

</style>